<template>
  <view class="cont_order">
    <u-navbar :placeholder="true" :safeAreaInsetTop="true" bgColor="#f5f6f5" titleStyle="color:#000">
      <view class="u-nav-slot" slot="center">
        <!-- 返回订单列表（查看详情时） -->
        <view class="config_bar" v-if="isGoDetail" @click="goBack">
          <uni-icons type="back" size="30"></uni-icons>
        </view>
        <!-- 返回我的 （在订单列表时） -->
        <view class="config_bar" v-else @click="goBackOrder">
          <uni-icons type="back" size="30"></uni-icons>
        </view>
        {{ isGoDetail ? "" : "充值订单" }}
      </view>
    </u-navbar>
    <scroll-view class="scrillView" v-if="!isGoDetail" scroll-y="true" :scroll-top="scrollTop">
      <view class="conclu_tab_main">
        <view class="tab_main_record">
          <!-- 搜索框 -->
          <view style="display: flex; flex-direction: row">
            <view class="record_picker">
              <uni-datetime-picker :clear-icon="false" v-model="dageTimeRange" type="datetimerange" placeholder="请输入订单时间" :border="false" rangeSeparator="至" @change="searchRecordList" />
            </view>
            <view @click="showPopup">
              <image style="width: 28rpx; height: 25rpx" src="../../static/order-img/筛选@3x.png"></image>
              <view class="icon_open_gd">更多 </view>
            </view>
          </view>

          <!-- 更多--搜索 -->
          <!-- <view v-if="!loadingStation" class="main_record_wraper"> -->
          <view v-if="!loadingStation" class="main_record_wraper">
            <uni-popup ref="popup" background-color="#fff" :before-close="true">
              <view class="record_station">
                <uni-data-select v-model="queryParams.stationId" :localdata="stationList" placeholder="请选择加油站" />
              </view>
              <view class="record_station">
                <uni-data-select v-model="queryParams.orderType" :localdata="orderTypelist" placeholder="请选择订单类型" />
              </view>
              <view class="record_station">
                <uni-datetime-picker :clear-icon="false" v-model="dageTimeRange" type="datetimerange" placeholder="请输入订单时间" rangeSeparator="至" />
              </view>
              <view class="record_station">
                <uni-easyinput class="input" v-model="queryParams.orderNo" placeholder="请输入订单号" />
              </view>
              <view class="record_station">
                <uni-easyinput class="input" v-model="queryParams.userName" placeholder="请输入客户姓名" />
              </view>
              <view class="record_station">
                <uni-easyinput class="input" v-model="queryParams.userPhone" placeholder="请输入客户手机号" />
              </view>
              <view @click="showPopup" class="icon_open">展开收起更多</view>
              <button @click="searchRecordList">订单记录查询</button>
            </uni-popup>

            <!-- 数据统计 -->
            <view class="record-hood" style="flex-wrap: wrap">
              <view class="record-hood-img">
                <view class="record-hood-imgtext">应收:</view>
                <view style="color: #819ef8"> ￥{{ allInfo.totalAmt || 0 }} </view>
              </view>
              <view class="record-hood-img">
                <view class="record-hood-imgtext">退款:</view>
                <view style="color: #819ef8"> ￥{{ allInfo.refundAmt || 0 }} </view>
              </view>
              <view class="record-hood-img">
                <view class="record-hood-imgtext">笔数:</view>
                <view style="color: #819ef8"> {{ allInfo.count || 0 }} </view>
              </view>
            </view>
          </view>

          <!-- 订单列表 -->
          <view class="befor_record">
            <view class="record-img_list" v-for="(item, index) in recordList" @click="goDetailPage(item)" :key="index">
              <view class="record-hood">
                <view class="record-hood-img">
                  <image class="record-img" src="/static/order-img/组 46@3x.png"></image>
                  <view class="record-text">{{ item.stationName }}</view>
                </view>
                <!-- 0、未支付或支付失败，1、成功 -->
                <view class="record-payno" v-show="item.status === '0'">未支付或支付失败</view>
                <view class="record-pay" v-show="item.status === '1' && item.payType != 'ref'">已支付</view>
                <view class="record-payno" v-show="item.status === '1' && item.payType === 'ref'">已退款</view>
              </view>
              <view class="record-bottom">
                <view class="record-hood">
                  <view>订单金额</view>
                  <view class="val_amt" :style="{ color: item.status === '1' && item.payType === 'ref' ? 'green' : 'red' }"> {{ item.payTypeState }}{{ item.amt }}元 </view>
                </view>
                <view class="record-hood">
                  <view>订单时间</view>
                  <view>{{ item.payTime }}</view>
                </view>
              </view>
            </view>
            <view v-if="recordList.length === 0" class="emptylist">暂无订单</view>
          </view>

          <!-- 分页 -->
          <view v-show="recordList.length > 0" style="height: 50px">
            <uni-pagination :total="total" :current="queryParams.pageNum" :pageSize="queryParams.pageSize" title="分页器" @change="changePage" />
          </view>
          <!-- <uni-load-more class="load-more" v-if="loadingStation" status="loading" /> -->
        </view>
      </view>
    </scroll-view>

    <!-- 查看详情 -->
    <view v-if="isGoDetail" class="see-hood-body">
      <view class="see-hood"> {{ detaiInfo.amt || 0.0 }}<span class="see-hood-yuan">元</span> </view>
      <view class="see-hood-text">
        <view class="see-hood-stationName">
          {{ detaiInfo.stationName }}
        </view>
        <view class="see-hood-text">
          <!-- 0、未支付或支付失败，1、成功 -->
          <view class="record-payno" v-show="detaiInfo.status === '0'">未支付或支付失败</view>
          <view class="record-pay" v-show="detaiInfo.status === '1' && detaiInfo.payType != 'ref'">已支付</view>
          <view class="record-payno" v-show="detaiInfo.status === '1' && detaiInfo.payType === 'ref'">已退款</view>
        </view>
      </view>

      <view class="see-body">
        <view class="see-body-text">加油信息</view>
        <view class="see-body-hr"></view>
        <view>
          <!-- 退款订单的订单号 -->
          <view v-if="detaiInfo.status === '1' && detaiInfo.payType === 'ref'">
            <view class="see-item">
              <view class="see-item-top"> 充值订单号 </view>
              <view class="see-item-bottom"> {{ detaiInfo.originOrderNo || "-" }} </view>
            </view>
            <view class="see-item">
              <view class="see-item-top"> 退款订单号 </view>
              <view class="see-item-bottom"> {{ detaiInfo.orderNo || "-" }} </view>
            </view>
          </view>
          <view v-else class="see-item">
            <view class="see-item-top"> 订单号 </view>
            <view class="see-item-bottom"> {{ detaiInfo.orderNo || "-" }} </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 油企名 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.enterpriseName || "-" }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 客户姓名 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.userName || "-" }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 手机号 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.userPhone || "-" }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 加油员 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.oilPersonName || "-" }}
            </view>
          </view>
        </view>
      </view>
      <view class="see-body">
        <view class="see-body-text">支付信息</view>
        <view class="see-body-hr"></view>
        <view>
          <!-- 退款类型 -->
          <view v-if="detaiInfo.status === '1' && detaiInfo.payType === 'ref'">
            <view class="see-item">
              <view class="see-item-top"> 退款金额 </view>
              <view class="see-item-bottom"> {{ detaiInfo.amt }}元 </view>
            </view>
            <view class="see-item">
              <view class="see-item-top"> 充值赠送金额 </view>
              <view class="see-item-bottom"> {{ detaiInfo.giftAmount }} 元 </view>
            </view>
          </view>
          <!-- 充值类型 -->
          <view v-else>
            <view class="see-item">
              <view class="see-item-top"> 充值金额 </view>
              <view class="see-item-bottom"> {{ detaiInfo.amt }}元 </view>
            </view>
            <view class="see-item">
              <view class="see-item-top"> 赠送金额 </view>
              <view class="see-item-bottom"> {{ detaiInfo.giftAmount }}元 </view>
            </view>
          </view>

          <!-- 通用字段 -->
          <view class="see-item">
            <view class="see-item-top"> 充值卡类型 </view>
            <view class="see-item-bottom"> {{ detaiInfo.rechargeCardType }} </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 支付方式 </view>
            <view class="see-item-bottom">
              {{ payTypeFotmat(detaiInfo) }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 余额 </view>
            <view class="see-item-bottom"> {{ detaiInfo.balance }}元 </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 余额变动 </view>
            <view class="see-item-bottom"> {{ detaiInfo.payTypeState === "+" ? "增加" : "扣减" }} </view>
          </view>
          <!-- 退款订单 -->
          <view v-if="detaiInfo.status === '1' && detaiInfo.payType === 'ref'">
            <view class="see-item">
              <view class="see-item-top"> 退款时间 </view>
              <view class="see-item-bottom">
                {{ detaiInfo.payTime || "-" }}
              </view>
            </view>
            <view class="see-item">
              <view class="see-item-top"> 支付时间 </view>
              <view class="see-item-bottom">
                {{ detaiInfo.originPayTime || "-" }}
              </view>
            </view>
          </view>
          <view v-else>
            <view class="see-item">
              <view class="see-item-top"> 支付时间 </view>
              <view class="see-item-bottom">
                {{ detaiInfo.payTime || "-" }}
              </view>
            </view>
            <view class="see-item">
              <view class="see-item-top"> 创建时间 </view>
              <view class="see-item-bottom">
                {{ detaiInfo.createdTime || "-" }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="see-foot" @click.stop="xiaopiao(detaiInfo)">补打小票</view> -->
    </view>
  </view>
</template>
<script>
import { getUserInfo } from "@/util/info.js";
import { getStationListJD,changeTimeOrder,employeePermission, historyOrderList, selectPayOrderSum, historyOrderFeiePush, getChargeOrderListApi, getChargeOrderSumApi } from "@/common/yftx-api.js";
import { getDateArrNew } from "@/util/utils.js";
import store from "@/store";
export default {
  data() {
    return {
      staff:false, //是否是员工
      userInfo: {},
      InfouSerLevel: '',
      refresherTriggered: false,
      scrollTop: 0,
      oldScrollTop: 0,
      total: 0, // 总条数
      // page: 1, // 当前页数
      // pageSize: 20,
      totalPage: null, // 总页数
      loadingStation: false,
      dageTimeRange: [],
      stationList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        stationId: "",
        orderNo: "",
        userName: "", // 用户名
        userPhone: "", // 手机号
        orderType: "", // 订单类型
      },
      stationId: "",
      detaiInfo: {},
      allInfo: {},
      recordList: [],

      isGoDetail: false,
      isMore: false,
      orderTypelist: [
        {
          value: "cz",
          text: "充值订单",
        },
        {
          value: "ref",
          text: "退款订单",
        },
      ],
    };
  },
  async onShow() {
    await this.getUserInfouSerLevel()
    await this.getStaff()
    if(this.InfouSerLevel == 2 && !this.staff) {
      await this.changeTime()
    } else {
      this.dageTimeRange = getDateArrNew();
    }
    this.recordList = [];
    this.getStationList();
    this.searchRecordList();
    //视图会发生重新渲染
    this.scrollTop = this.oldScrollTop;
    //当视图渲染结束 重新设置为0
    this.$nextTick(() => {
      this.scrollTop = 0;
    });
    uni.showToast({
      icon: "none",
      title: "纵向滚动 scrollTop 值已被修改为 0",
    });
  },
  methods: {
    async getStaff() {
	  const res = await employeePermission();
      this.staff = res.data.staff;
    },
    async changeTime() {
      let params = {
        stationId: this.userInfo.stationId,
        userId: this.userInfo.userId
      }
      const res = await changeTimeOrder(params)
      this.dageTimeRange = [res.data.startTime,res.data.endTime]
      console.log(res,this.dageTimeRange);
    },
    // 获取用户等级
    async getUserInfouSerLevel() {
      const level = await getUserInfo("userLevel");
      this.InfouSerLevel = level; 
       // 这个用户等级仅仅用来控制油价调增的
       const userInfo = await getUserInfo("userInfo");
      this.userInfo = JSON.parse(userInfo); 
     },
    // 下拉刷新被触发了
    refresherrefresh() {
      this.refresherTriggered = true;
      this.recordList = [];
      this.searchRecordList();
      console.log("下拉刷新被触发了");
    },

    // 获取油站列表数据
    async getStationList() {
      const res = await getStationListJD();
      this.stationList = res.data.map((item) => {
        return {
          value: item.stationId,
          text: item.stationName,
        };
      });
    },
    // 返回 ”我的“
    goBackOrder() {
      uni.switchTab({
        url: "/pages/index/my",
      });
    },

    // 返回订单列表
    goBack() {
      this.isGoDetail = false;
    },

    // 展示更多搜索框
    showPopup() {
      this.isMore = !this.isMore;
      if (this.isMore) {
        this.$refs.popup.open("top");
      } else {
        this.$refs.popup.close();
      }
    },

    // 支付类型格式化
    payTypeFotmat(val) {
      // 电子卡
      const types_dzk = {
        wx: "微信充值",
        pos: "移动支付充值",
        ref: "电子卡退款",
        msub: "现金充值",
        imp: "现金充值",
      };
      // 实体卡
      const types_stk = {
        wx: "微信充值",
        pos: "移动支付充值",
        xj: "现金充值",
        dekbka: "定额卡后台充值",
        czkbka: "储值卡后台充值",
        ref: "充值退款",
      };
      // 车队卡
      const types_cdk = {
        cz: "车队卡后台充值",
        imp: "车队卡余额调整",
        msub: "车队卡余额调整",
      };
      if (val.rechargeCardType === "电子卡") {
        return types_dzk[val.payType];
      } else if (val.rechargeCardType === "实体卡") {
        return types_stk[val.payType];
      } else if (val.rechargeCardType === "-") {
        return types_cdk[val.payType];
      } else {
        return "未知支付";
      }
    },

    // 订单状态格式化
    statusFotmat(val) {
      if (val === "0") {
        return "未支付";
      } else if (val === "1") {
        return "已支付";
      } else if (val === "2") {
        return "线下退款";
      } else if (val === "3") {
        return "线上退款";
      }
    },

    // 搜索
    searchRecordList() {
      this.queryParams.pageNum = 1;
      this.recordList = [];
      this.searchRecord();
    },

    // 修改页码
    changePage(e) {
      this.queryParams.pageNum = e.current;
      this.searchRecord();
    },

    // 获取订单列表以及汇总数据
    async searchRecord() {
      this.loadingStation = true;
      let params = {
        ...this.queryParams,
        beginTime: this.dageTimeRange[0],
        endTime: this.dageTimeRange[1],
      };
      // 获取列表
      console.log("11111", this.recordList);
      const res = await getChargeOrderListApi(params);
      if (res && res.code === 200) {
        this.recordList = res.data.list || [];
        this.total = res.data.total;
      }
      if (res && res.code != 200) {
        console.log(3333, res.msg);
        uni.showModal({
          title: "提示",
          content: "获取订单列表失败，" + res.code + res.msg,
          showCancel: false,
        });
      }
      // 获取汇总
      const sumdata = await getChargeOrderSumApi(params);
      this.allInfo = sumdata.data;
      this.loadingStation = false;
      this.refresherTriggered = false;

      this.$nextTick(() => {
        uni.pageScrollTo({
          duration: 500,
          selector: ".cont_order",
          success: function (res) {
            console.log("success", res);
          },
          fail: function (err) {
            console.log("err", err);
          },
          complete: function (res) {
            console.log(res);
          },
        });
      });
    },

    // 查看订单详情
    goDetailPage(item) {
      console.log("item1111", item, this.recordList);

      this.loadingStation = true;
      this.detaiInfo = item;
      setTimeout(() => {
        this.loadingStation = false;
        this.isGoDetail = true;
      }, 200);
    },
  },
};
</script>
<style lang="scss">
.see-hood-body {
  padding-left: 6%;
}

page {
  width: 94%;
  background-color: #f5f6f5;
  padding-top: 3%;
  padding-right: 3%;
  padding-bottom: 60px;
}

.see-hood {
  font-size: 25px;
  color: #333;
  padding: 0px 5px;
  margin-bottom: 3px;
}

.see-hood-yuan {
  margin: 0px 3px;
  font-size: 13px;
  color: #9095ad;
}

.see-hood-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 5px;
}

.record-payno {
  font-size: 12px;
  width: 62px;
  height: 22px;
  line-height: 22px;
  color: #ff4445;
  text-align: center;
  border-radius: 10px;
  background-color: #ffecec;
}

.record-pay {
  font-size: 12px;
  width: 62px;
  height: 22px;
  line-height: 22px;
  color: #0dbe00;
  text-align: center;
  border-radius: 10px;
  background-color: #e6f8e5;
  margin-left: 20px;
}

.see-hood-stationName {
  font-size: 14px;
  color: #9095ad;
}

.see-body {
  background-color: #fff;
  border-radius: 10px;
  margin: 10px 0px;
  padding: 15px 5px 5px 5px;
}

.see-body-text {
  font-size: 16px;
  border-left: 2px solid #ff4445;
  height: 15px;
  width: 100px;
  line-height: 15px;
  text-align: center;
  margin: 0px 15px;
}

.see-body-hr {
  width: 100%;
  height: 2px;
  background-color: #f5f6f5;
  margin: 15px 0px;
}

.see-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px 10px 15px 10px;
}

.see-item-top {
  font-size: 14px;
  color: #9095ad;
}

.see-item-bottom {
  font-size: 14px;
  color: #333;
}

.see-foot {
  border-radius: 25px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  margin: 0px 10% 10px 10%;
  width: 80%;
  height: 50px;
  background-color: #496ef6;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

.record-payno {
  font-size: 12px;
  width: 62px;
  height: 22px;
  line-height: 22px;
  color: #ff4445;
  text-align: center;
  border-radius: 10px;
  background-color: #ffecec;
}

.record-pay {
  font-size: 12px;
  width: 62px;
  height: 22px;
  line-height: 22px;
  color: #0dbe00;
  text-align: center;
  border-radius: 10px;
  background-color: #e6f8e5;
}

.record-hood-imgtext {
  font-weight: bold;
  color: #333;
}

.record-hood-img {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
}

.record-hood {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.record-bottom {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 72px;
  background-color: #f7f9fc;
  margin-top: 10px;
  padding: 5px 10px 5px 10px;
  border-radius: 12px;
}

.record-img_list {
  height: 12%;
  background-color: #fff;
  border-radius: 12px;
  margin: 0px 10px 10px 10px;
  padding: 10px;
}

.record-img {
  width: 35px;
  height: 35px;
}

.record-text {
  font-weight: bold;
  margin: 0px 10px;
  color: #333;
}

.icon_open_gd {
  font-size: 11px;
  text-align: center;
}

.record_picker {
  width: 80%;
  height: 38px;
  background-color: #fff;
  padding: 2px 10px 1px 10px;
  border-radius: 19px;
  margin: 0px 10px 10px 10px;
  .uni-date__x-input {
    font-size: 11px;
  }
}

.cont_order {
  .u-navbar {
    .u-icon {
      display: none;
    }
  }

  .u-nav-slot {
    color: #000;
  }

  .config_bar {
    position: absolute;
    color: #000;
    font-size: 32rpx;
    left: 20rpx;
    top: 24rpx;
  }

  .cont_wraper {
    width: 100%;
    position: absolute;
    z-index: -1;
    height: 60rpx;
    background-color: #0020f5;
  }
  .scrillView {
    //height: 88vh;
    height: auto !important; // 不要写死高度，不然滚动不生效
    position: absolute;
    width: 100vw;
    margin-bottom: 200rpx;
  }
  .conclu_tab_main {
    padding-top: 20rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;
    height: 100%;

    .uni-load-more {
      margin-top: 300rpx;
    }

    button {
      background-color: #fc6703;
      color: #fff;
      border-radius: 10rpx;
      border: none;
      //&.disabled {
      //background-color: #eee;
      //color: #666;
      //}
    }

    .tab_main_record {
      background-color: #f5f6f5;
      min-height: 90vh;

      .main_record_wraper {
        background-color: #fff;
        padding: 0 40rpx;
        width: 94%;
        margin: 0px 3%;
        min-height: 46px;
        line-height: 46px;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        border-radius: 25rpx;
        overflow: hidden;

        .icon_open {
          text-align: center;
          font-size: 26rpx;
          color: #fc650e;
          margin: 0 auto 20rpx;
        }

        .record_station {
          align-items: center;
          display: flex;
          width: 100%;
          margin-bottom: 30rpx;
          margin-top: 40rpx;

          .uni-date__x-input {
            font-size: 24rpx;
          }

          .name {
            font-size: 26rpx;
            margin-right: 20rpx;
          }

          .input {
            flex: 1;
          }

          .uni-select {
            width: 670rpx;
          }
        }
      }

      .befor_record {
        .title_record_a {
          padding: 30rpx;
          background-color: #fff;
          border-radius: 30rpx;
          box-sizing: border-box;
          margin-bottom: 20rpx;

          .title {
            margin-bottom: 30rpx;
            font-size: 26rpx;
          }

          .title_record_b {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .title_line {
            width: 1px;
            height: 80rpx;
            background-color: #999;
          }

          .order_nav {
            display: flex;
            flex-direction: column;
            position: relative;
            color: #000;
            font-size: 26rpx;

            .name {
              margin-bottom: 40rpx;
            }

            .val {
            }
          }
        }

        .emptylist {
          height: 100px;
          color: #999;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }

  .uni-popup {
    position: absolute;

    .uni-popup__wrapper {
      padding: 40rpx;
    }
  }

  .nav_bar_conclu .uni-navbar {
    .uni-navbar--border {
      border-bottom-style: none;
    }
  }

  .val_amt {
    color: #ff4445;
  }

  .record_icon {
    position: absolute;
    right: 14rpx;
    top: 80rpx;
  }

  .record_detail_container {
    font-size: 26rpx;
    color: #000;
    width: 100%;
    box-sizing: border-box;
    padding: 60rpx;

    .card {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-bottom: 20rpx;

      &.line {
        margin-bottom: 40rpx;

        &::after {
          content: "";
          position: absolute;
          width: 300rpx;
          height: 1px;
          background-color: #333;
          left: -16rpx;
          top: 50rpx;
        }
      }
    }
  }
}
</style>
